<template>
  <div class="search">
    <el-form :inline="true" :model="form">
      <el-form-item label="姓名">
        <el-input v-model="form.username" class="ant-input" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="登记时间">
        <el-date-picker
          v-model="form.register_at"
          clearable
          value-format="yyyy-MM-dd"
          type="date"
          class="ant-input"
          placeholder="请选择登记时间"
        />
      </el-form-item>
      <el-form-item label="性别" class="demo-form-inline">
        <el-select
          v-model="form.gender"
          clearable
          placeholder="请选择性别"
          class="ant-input"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="员工身份" class="demo-form-inline">
        <el-select
          v-model="form.identity"
          clearable
          placeholder="请选择员工身份"
          class="ant-input"
        >
          <el-option
            v-for="item in identityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间查询" class="demo-form-inline">
        <el-date-picker
          v-model="form.register"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          unlink-panels
          :picker-options="pickerOptions"
          end-placeholder="结束日期"
          @change="selectTime"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchClick"
        >查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
      form: {
        identity: null
        // paginate:10,
        // gender: "",
        // register_at: "",
        // username: "",
      },
      options: [
        { value: 0, label: '女' },
        { value: 1, label: '男' }
      ],
      identityOptions: [
        { value: 0, label: '正式员工' },
        { value: 1, label: '实习员工' },
        { value: 2, label: '试用员工' }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    searchClick() {
      const pattern =
        /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}).(\d{3})Z$/
      if (pattern.test(this.form.register_at)) {
        const date = new Date(this.form.register_at)
        this.form.register_at = date.toLocaleDateString()
      }

      this.$emit('searchClick', this.form)
    },
    selectTime(arr) {
      console.log(arr)
      if (arr) {
        this.form.start_at = dayjs(arr[0]).format('YYYY-MM-DD')
        this.form.end_at = dayjs(arr[1]).format('YYYY-MM-DD')
        console.log(this.form)
      } else {
        delete this.form.start_at
        delete this.form.end_at
        console.log(this.form)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.search {
  margin-top: 20px;
  .ant-input {
    width: 240px;
    padding-right: 40px;
  }
}

</style>
